<script setup>
import { defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
import api from "@/api/index.js";
import { goPayUrl } from "@/utils/pay.js";

const emit = defineEmits(["onLoad"]);
import { useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const orderType = route.query.title;
const props = defineProps({
  type: [Number, String],
  data: Object,
  types: String,
});

// 订单状态: 0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退款 6-已过期
const getTypeText = () => {
  const status = props.data.orderStatus;
  if (status === 0) {
    return {
      text: "待支付",
      color: "#ED6316",
    };
  }
  if (status === 1) {
    return {
      text: "已完成",
      color: "#999999",
    };
  }
  if (status === 2) {
    return {
      text: "已取消",
      color: "#999999",
    };
  }
};
const goDetailClick = () => {
  router.push({
    path: `/hs/${props.data.orderNo}`,
    query: { type: orderType },
  });
};

const goPayClick = async () => {
  const { code, data } = await api.getPayUrl({
    orderNo: props.data.orderNo,
    finishUrl:
      window.location.protocol +
      "//" +
      window.location.host +
      "/#/order?title=haishua",
  });
  if (code == 200) goPayUrl({ payId: data.payId }); // window.location.href = data.payUrl;
};

const beforeClose = (action) => {
  return new Promise((resolve) => {
    if (action === "confirm") {
      api
        .getCancelOrder({ orderNo: props.data.orderNo })
        .then(() => {
          resolve(true);
          emit("cancelOrderResetting");
        })
        .catch(() => {
          resolve(false);
        });
    } else {
      resolve(true);
    }
  });
};

const cancelClick = () => {
  showConfirmDialog({
    message: "确定取消该订单?",
    beforeClose,
  });
};
// 再次购买
const handelrepurchase = () => {
  let path = ''
  if(orderType == 'panda') path = '/panda-details'
  else path = '/haishua-details'
  router.push({
    path: path,
    query: { cardId: props.data.cardId },
  });
};
</script>

<template>
  <div class="card">
    <div class="header">
      <div class="header_left"></div>
      <div class="header_right">
        <img
          v-if="data.orderStatus === 0"
          src="@/assets/images/icons/noPay.png"
          alt=""
        />
        <img
          v-else-if="data.orderStatus === 1"
          src="@/assets/images/icons/complete.png"
          alt=""
        />
        <img
          v-else-if="data.orderStatus === 2"
          src="@/assets/images/icons/complete.png"
          alt=""
        />
        <div
          class="type"
          :style="{ color: getTypeText()?.color }"
          v-if="orderType == 'panda'"
        >
          <!-- {{ getTypeText()?.text }} -->
          {{
            data.orderStatus == 1
              ? data?.isActivate == 0
                ? "未激活"
                : "已激活"
              : getTypeText()?.text
          }}
        </div>
        <div class="type" :style="{ color: getTypeText()?.color }" v-else>
          {{ getTypeText()?.text }}
        </div>
      </div>
    </div>
    <div class="content" @click="goDetailClick">
      <div class="content_right">
        <div class="top">
          <div class="name">
            {{ data?.cardName }}
          </div>
          <div class="price">
            <span class="icon">￥</span>
            <span class="number">{{ data?.orderAmount }}</span>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom_item fz14 mb10 mt10">
            {{
              data.remainTimes === -99
                ? "无限次"
                : `剩余次数：${data.remainTimes || "--"}`
            }}
          </div>
          <div class="bottom_item">
            {{ data.isExpire == 1 ? "已过期" : `有效期至：${data.expireTime}` }}
          </div>
        </div>
      </div>
      <van-image
        class="van_image"
        lazy-load
        width="8rem"
        height="8rem"
        fit="cover"
        :src="data.coverImage"
      >
      </van-image>
    </div>
    <div v-if="data?.orderStatus === 0" class="button_box">
      <div class="button primary" @click.stop="goPayClick">去支付</div>
      <div class="button default" @click.stop="cancelClick">取消订单</div>
    </div>
    <div
      v-if="data?.orderStatus === 1 || data?.orderStatus === 2"
      class="button_box"
    >
      <div class="button primary" @click="handelrepurchase()">再次购买</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  background: #fffffc;
  box-shadow: 0 1.2rem 2rem 0 rgba(2, 95, 38, 0.05);
  border-radius: 1rem;
  padding: 1rem 1rem 0 1.5rem;

  .header {
    display: flex;
    justify-content: space-between;

    .header_left {
      display: flex;
      align-items: center;

      .name {
        color: #333333;
        font-weight: bold;
        padding: 0 0.5rem;
      }
    }

    .header_right {
      display: flex;
      align-items: center;

      img {
        width: 1.4rem;
        height: 1.4rem;
      }

      .type {
        margin-left: 0.4rem;
        white-space: nowrap;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 1.5rem 0;

    img {
      height: 8rem;
      width: auto;
      border-radius: 0.5rem;
    }

    .content_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 1rem;

      .top {
        display: flex;
        justify-content: space-between;

        .name {
          font-size: 1.6rem;
          color: #333333;
          font-weight: bold;
          line-height: 1.9rem;
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price {
          color: #ed6316;
          margin-left: 1rem;
          font-weight: bold;

          .icon {
            font-size: 1.4rem;
          }

          .number {
            font-size: 1.8rem;
          }
        }
      }

      .bottom {
        color: #999999;
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        .bottom_item {
          line-height: 1.7rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .expiring_soon {
          color: #ed6316;
        }
      }
    }
  }

  .button_box {
    display: flex;
    flex-direction: row-reverse;
    padding: 1.5rem 0;
    border-top: 0.1rem solid #eeeeee;

    .button {
      margin-left: 0.5rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 0.5rem;
      padding: 0 1.5rem;
      font-size: 1.4rem;
    }
    .button_disabled {
      opacity: 0.5;
    }

    .default {
      color: #666666;
      background: rgb(242, 242, 242);
    }

    .default:active {
      color: #666666;
      background: rgb(211, 211, 211);
    }

    .primary {
      color: #ffffff;
      background-color: var(--van-primary-color);
    }

    .primary:active {
      background: #4b947f;
    }
  }
}
</style>